import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {Config, Platform, PopoverController} from "ionic-angular";
import {GPayKeyboardComponent} from "../g-pay-keyboard/g-pay-keyboard";
import {GPopoverPopIn, GPopoverPopOut} from "../../common/Helper";

@Component({
  selector: 'g-pay-password',
  templateUrl: 'g-pay-password.html'
})
export class GPayPasswordComponent {

  @ViewChild('input') input
  private _value: string = ''
  @Output() valueChange = new EventEmitter()

  @Input()
  get value() {
    return this._value
  }

  set value(val) {
    if(this._value == val){
      return
    }
    this._value = val
    this.valueChange.emit(val)
  }

  active: boolean = false
  top: number

  constructor(public popover: PopoverController,
              public config: Config,
              public platform: Platform) {
    this.top = this.platform.height() - 270
    this.config.setTransition('g-popover-pop-in', GPopoverPopIn);
    this.config.setTransition('g-popover-pop-out', GPopoverPopOut);
  }

  presentPopover() {
    let popover = this.popover.create(GPayKeyboardComponent, {
      //这里传入回调
      success: (v) => {
        this.value = v
      },
      onClose: () => {
        this.active = false
      },
      autoClose: true,
      defaultValue: this.value
    }, {
      cssClass: 'g-popover-bottom transparent',
      // showBackdrop: false
    });
    let ev = {
      target: {
        getBoundingClientRect: () => {
          return {
            top: this.top,
            left: 0
          };
        }
      }
    };
    popover.present({
      ev: ev
    });
  }

  focus() {
    this.active = true
    this.presentPopover()
  }

}
